<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar fixed>
      <template #left>
        <img :src="Img" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="white" @click="$router.push({path:'/search'})"/>
      </template>
    </van-nav-bar>
    <!-- 主体部分 -->
    <div class="main">
      <!-- v-model绑定的是标志符信息  设置name属性为name属性值,不设置默认为下标 -->
      <van-tabs
        v-model="channelId"
        animated
        sticky
        offset-top="1.226667rem"
        @click="clkFn"
      >
        <van-tab
          :title="item.name"
          v-for="item in userChannelsList"
          :key="item.id"
          :name="item.id"
        >
          <!-- 文章列表页面 -->
          <!-- 下拉刷新 -->
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <!-- 上拉加载 -->
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              offset="30"
            >
              <ArticleList :articleList="articleList" @del='delFn' @del2='del2Fn'></ArticleList>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
      <!-- +号图标 -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="show=true"/>
    </div>
    <van-popup v-model="show" @close='$refs.edit.show=false'>
       <!-- 弹出层的头部区域 -->
    <van-nav-bar title="频道管理">
      <template #right>
        <van-icon name="cross" size="14" color="white" @click="show = false" />
      </template>
    </van-nav-bar>
      <ChannelEdit :userChannelsList='userChannelsList' ref="edit" @intoChannel='intoFn' @closeP='show=false'></ChannelEdit>
    </van-popup>
  </div>
</template>
<script>
import Img from '@/assets/logo.png'
import { getUserChannelsListAPI, articleListAPI, articleDisLikingAPI, articleReportsAPI } from '@/api'
import ArticleList from './ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'// 导入弹出层的面板
import { toDay } from '../../directives/date' // 导入时间处理函数
const obj = {}
export default {
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      Img: Img, // 声明图片变量
      // active: 0, // 默认下标为0选中
      userChannelsList: [], // 用户已选频道数据
      channelId: 0, // 频道id
      articleList: [], // 文章列表
      loading: false, // 底部加载状态
      finished: false, // 底部数据是否全部加载完毕
      pre_timestamp: null, // 分页需要
      refreshing: false, // 下拉刷新
      show: false// 控制弹出面板的显示与否
    }
  },
  async activated () {
    // 获取用户已选导航数据
    const res = await getUserChannelsListAPI()
    this.userChannelsList = res.data.data.channels
    this.getArticleList()
  },
  methods: {
    // 获取文章列表
    async getArticleList () {
      if (obj[this.channelId]?.arr && this.loading === false) {
        this.articleList = obj[this.channelId].arr
        // 为了分页做准备
        this.pre_timestamp = obj[this.channelId].nextTime
      } else {
        const res2 = await articleListAPI(this.channelId, this.pre_timestamp)
        // 如果数据全部加载完毕,不再加载
        if (res2.data.data.results.length === 0) {
          this.finished = true
          return
        }
        // 把原来数组与新获取的数据合并在一起
        this.articleList = [...this.articleList, ...res2.data.data.results]
        // 把获取到的数据一起缓存在obj中的arr中
        obj[this.channelId] = {}
        obj[this.channelId].arr = this.articleList
        // 把这个保存到obj的nexttime中
        obj[this.channelId].nextTime = res2.data.data.pre_timestamp
        // 时间格式化处理
        this.articleList.forEach((item) => {
          item.pubdate = toDay(item.pubdate)
        })
        // 底部加载完毕
        this.loading = false
        // 顶部刷新完成
        this.refreshing = false
      }
    },
    // 点击频道导航,切换频道id,切换内容
    clkFn () {
      this.articleList = []
      this.pre_timestamp = null
      this.getArticleList()
    },
    onLoad () {
      if (this.articleList.length === 0) {
        return
      }
      this.getArticleList()
    },
    onRefresh () {
      this.articleList = []
      obj[this.channelId].arr = null
      obj[this.channelId].nextTime = null
      this.pre_timestamp = null
      this.getArticleList()
    },
    delFn (itemm) {
      // 前端删除数据
      const i = this.articleList.findIndex(item => item.art_id === itemm.art_id)
      if (i !== -1) {
        this.articleList.splice(i, 1)
        articleDisLikingAPI({ id: itemm.art_id })
      }
      if (this.articleList.length === 5) {
        this.getArticleList()
      }
    },
    del2Fn (itemm, action) {
      const i = this.articleList.findIndex(item => item.art_id === itemm.art_id)
      if (i !== -1) {
        this.articleList.splice(i, 1)
        articleReportsAPI({ artId: itemm.art_id, type: action.value + '' })
      }
    },
    intoFn (item) {
      this.channelId = item.id
    }
  }
}
</script>

<style lang='less' scoped>
img {
  height: 36.8px;
}
.main {
  padding-top: 46px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.van-popup{
  width: 100%;
  height: 100%;
}
</style>
